<template>
	<view class="login-page">
		<van-nav-bar left-text="返回" title="用户登录" left-arrow @click-left="onClickLeft" />
		<!-- 动态背景 -->
		<video class="videoContainer" src="../../static/CCND4006.mp4" loop muted autoplay initial-time="4"
			controls="false"></video>

		<!-- logo -->
		<image class=" logo" src="../../static/favicon.ico"></image>
		<!-- 注册表单 -->
		<van-form @submit="onSubmit">
			<van-cell-group inset>
				<van-field v-model="phone" name="phone" label="账号" placeholder="请输入账号"
					:rules="[{ required: true, message: '请填写用户名' }]" />
				<van-field v-model="password" type="password" name="password" label="密码" placeholder="请输入密码"
					:rules="[{ required: true, message: '请填写密码' }]" />
			</van-cell-group>
			<div style="margin: 16px;">
				<van-button round block type="primary" native-type="submit">
					登录
				</van-button>
			</div>
		</van-form>
		<!-- 注册跳转 -->
		<navigator class="goRegister" url="../register/register">没有账号? 去注册</navigator>
		<!-- 阅读协议 -->
		<view class="tip">
			<label>
				<checkbox v-model="ok" :checked="ok" @click="ok=!ok" />
			</label>
			已阅读并同意
			<navigator url="../yonghuxieyi/yonghuxieyi">《用户协议》</navigator>
			和<navigator url="../yinsizhengce/yinsizhengce">《隐私政策》</navigator>
		</view>
		<!-- 授权登录 -->
		<view class="accredit">
			<image src="../../static/icon/weixin.png" mode="" @click="followUp"></image>
			<image src="../../static/icon/apple.png" mode="" @click="followUp"></image>
		</view>

	</view>
</template>

<script setup>
	import $api from '../../request/index.js'
	import {
		showFailToast,
		showSuccessToast
	} from 'vant'
	import {
		ref
	} from 'vue'

	import {
		useMoto
	} from '../../pinia/index.js'

	const moto = useMoto()

	let phone = ref('')
	let password = ref('')
	let ok = ref(false)

	function onSubmit(value) {
		if (!ok.value) {
			return showFailToast('请先阅读协议')
		}

		let {
			phone,
			password
		} = value

		// 正则判断账号格式 
		const regex = /^1\d{10}$/;
		if (!regex.test(phone)) {
			return showFailToast('账号格式错误')
		}

		$api.post('/moto/User/login', {
			phone,
			password
		}).then(res => {
			console.log(res)
			let {
				code,
				data: {
					userToken
				}
			} = res
			if (code) {
				// 登录成功 修改 登录状态
				moto.login = true
				showSuccessToast('登录成功')
				uni.setStorageSync('userToken', userToken)
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/home/home'
					})
				}, 1500)
			} else {
				showFailToast('登录失败')
			}
		})

	}

	function onClickLeft() {
		uni.navigateBack()
	}

	const followUp = () => {
		showToast('暂未开发，敬请期待')
	}
</script>

<style>
	.login-page {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
	}

	.logo {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		box-shadow: 0 0 30px 0px #ffd900;
		display: block;
		margin: 60rpx auto;
	}

	h2 {
		box-sizing: border-box;
		text-align: left;
		padding-top: 60rpx;
		padding-left: 40rpx;
	}

	input {
		width: 70%;
		padding: 20rpx 30rpx;
		background-color: #F8F8F8;
		margin: 40rpx auto;
		border-radius: 20rpx;
	}

	.van-cell.van-field {
		background-color: #F8F8F8;
		margin: 40rpx auto;
		font-size: 30rpx;
		color: #D4D4D4;
		border-radius: 20rpx;
	}

	.van-button {

		border-radius: 20rpx
	}


	.tip {
		display: flex;
		color: #D1D1D1;
		font-size: 12px;
		align-items: center;
		margin: 20rpx;
		justify-content: center;
	}

	.goRegister {
		padding: 0 60rpx;
		text-align: right;
		font-size: 12px;
	}

	navigator {
		color: #7EA8E3;
	}

	.accredit {
		margin-top: 100rpx;
		display: flex;
		justify-content: center;
	}

	.accredit>image {
		width: 70rpx;
		height: 70rpx;
		margin: 0 40rpx;
	}

	.van-cell-group.van-cell-group--inset {
		background-color: rgba(0, 0, 0, 0);
	}

	.van-cell.van-field {
		background-color: rgba(255, 255, 255, 0.9);
	}

	.videoContainer {
		position: fixed;
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: -100;
	}

	.videoContainer:before {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		display: block;
		z-index: -1;
		top: 0;
		left: 0;
		background: rgba(25, 29, 34, .65);
	}
</style>